{% extends "base.html" %}

{% block content %}
    <h2>Sign Up</h2>
    <p>To sign up for a new account, fill the form below with your account information.</p>
    <script>
        var RecaptchaOptions = {
           tabindex : 4
        };
    </script>
    {% form.open {"action": "users/signup", "autocomplete": "off"} %}
        <div class="input text required">
            {% form.label "Username", "username" %}
            <span class="input">{% form.input "username", "", {"id": "username", "size": 30, "tabindex": 1} %}</span>
        </div>
        <div class="input password required">
            {% form.label "Password", "password" %}
            <span class="input">{% form.password "password", "", {"id": "password", "size": 30, "tabindex": 2} %}</span>
            <div class="view-password">
                {% form.label "Show password", "show_password" %}
                {% form.checkbox "show_password", "", {"id": "show_password"} %}
            </div>
        </div>
        <div class="input text required">
            {% form.label "Email Address", "email" %}
            <span class="input">{% form.input "email", "", {"id": "email", "size": 30, "tabindex": 3} %}</span>
        </div>
        <div class="input text required">
            {% form.label "Secure", "secure" %}
            <div class="recaptcha">{% autoescape false %}{{ captcha }}{% endautoescape %}</div>
        </div>
        <div class="input submit">
            {% form.submit "signup", "Sign Up", {"tabindex": 5} %}
        </div>
    {% form.close %}
{% endblock %}

{% block jscript %}
<script>
    (function($){
        var password = $("#password").password_strength(),
            passwordText = $("<input/>", { id: "password_text", size: 30, type: "text" });

        $("#show_password").click(function() {
            if ($(this).get(0).checked) {
                passwordText.val(password.val());
                password
                    .hide()
                    .after(passwordText.password_strength());
            } else {
                password
                   .val(passwordText.val())
                   .show();
                passwordText.remove();
            }
        });

        var titles = { "username": "Username", "password": "Password", "email": "Email" };
        {% for key, text in errors %}
            $.pnotify({ pnotify_title: titles["{{ key }}"], pnotify_text: "{{ text }}", pnotify_type: "error", pnotify_history: false });
        {% endfor %}
    })(jQuery);
</script>
{% endblock %}